
<template>
    <div class="externalArrears-box">
        <!-- 外欠款汇总 -->
        <FirmTableComponents :color="color" :bg="bg" :Timeline="Timeline" :firmTable="firmTable" 
        :total="total" :page="page" :limit="limit" :pageSize="pageSize" :firmTableData="firmTableData"
        @optionTime="optionTime" @handleSelectionChange="handleSelectionChange"
        @handleChange="handleChange" @updatePage="updatePage" @updateLimit="updateLimit">
        <!-- 表单 -->
            <serchForm @onSearch="onSearch" :firmFrom="firmFrom" ></serchForm>
        </FirmTableComponents>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import FirmTableComponents from '@/components/firm/FirmTableComponents.vue'
import serchForm from '@/components/firm/serchForm.vue'
let color = ref('#333')
let bg = ref('#F6F6F6')
// 每页显示条目个数
const pageSize = ref([10, 20, 30, 50])
// 总条目数   pageSize 加 1
let total = ref(80)
// 当前页数
let page = ref(1)
// 条数
let limit = ref(20)
// 存储勾选框的对象
let multipleSelection = ref(null)
// 时间轴
let Timeline = ref([
    {
        time: '年度',
        index: 0,
    },
    {
        time: '季度',
        index: 1,
    },
    {
        time: '月度',
        index: 2,
    }
])
// 公司表单数据
let firmFrom = ref({
    firmName: '',
    projectName: '',
    customerName: '',
    leader: '',
})
// 公司表格表头数据
let firmTableData = ref([
    {
        prop:'orderId',
        label:'单据编号'
    },
    {
        prop:'orderDate',
        label:'单据日期'
    },
    {
        prop:'firmName',
        label:'公司名称'
    },
    {
        prop:'projectName',
        label:'项目名称'
    },
    {
        prop:'customerName',
        label:'客户名称'
    },
    {
        prop:'customerType',
        label:'客户类型'
    },
    {
        prop:'debtOrderCount',
        label:'欠款订单数'
    },
    {
        prop:'debtAmount',
        label:'欠款金额'
    },
    {
        prop:'contactPerson',
        label:'联系人'
    },
    {
        prop:'creator',
        label:'制单人'
    },
    {
        prop:'leader',
        label:'负责人'
    },
])
// 公司表格表格数据
let firmTable = ref([
    {
        orderId:0,
        orderDate:'2024-03-12',
        firmName: '天工大厦',
        projectName: '门头',
        customerName: '虾米',
        customerType: '散户',
        debtOrderCount: '666',
        debtAmount: '666',
        contactPerson: '咸虾米',
        creator: '咸虾米',
        leader: '郭子仪',
    },
    {
        firmName: '天工大厦',
        projectName: '门头',
        customerName: '虾米',
        customerType: '散户',
        debtOrderCount: '666',
        debtAmount: '666',
        contactPerson: '咸虾米',
        creator: '咸虾米',
        leader: '郭子仪',
        orderId:1,
        orderDate:'2024-03-12',

    },
    {
        firmName: '天工大厦',
        projectName: '门头',
        customerName: '虾米',
        customerType: '散户',
        debtOrderCount: '666',
        debtAmount: '666',
        contactPerson: '咸虾米',
        creator: '咸虾米',
        leader: '郭子仪',
        orderId:2,
        orderDate:'2024-03-12',

    },
    {
        firmName: '天工大厦',
        projectName: '门头',
        customerName: '虾米',
        customerType: '散户',
        debtOrderCount: '666',
        debtAmount: '666',
        contactPerson: '咸虾米',
        creator: '咸虾米',
        leader: '郭子仪',
        orderId:3,
        orderDate:'2024-03-12',

    },
    {
        firmName: '天工大厦',
        projectName: '门头',
        customerName: '虾米',
        customerType: '散户',
        debtOrderCount: '666',
        debtAmount: '666',
        contactPerson: '咸虾米',
        creator: '咸虾米',
        leader: '郭子仪',
        orderId:4,
        orderDate:'2024-03-12',

    },
    {
        firmName: '天工大厦',
        projectName: '门头',
        customerName: '虾米',
        customerType: '散户',
        debtOrderCount: '666',
        debtAmount: '666',
        contactPerson: '咸虾米',
        creator: '咸虾米',
        leader: '郭子仪',
        orderId:5,
        orderDate:'2024-03-12',

    },
    {
        firmName: '天工大厦',
        projectName: '门头',
        customerName: '虾米',
        customerType: '散户',
        debtOrderCount: '666',
        debtAmount: '666',
        contactPerson: '咸虾米',
        creator: '咸虾米',
        leader: '郭子仪',
        orderId:6,
        orderDate:'2024-03-12',

    },
    {
        firmName: '天工大厦',
        projectName: '门头',
        customerName: '虾米',
        customerType: '散户',
        debtOrderCount: '666',
        debtAmount: '666',
        contactPerson: '咸虾米',
        creator: '咸虾米',
        leader: '郭子仪',
        orderId:7,
        orderDate:'2024-03-12',

    },
    {
        firmName: '天工大厦',
        projectName: '门头',
        customerName: '虾米',
        customerType: '散户',
        debtOrderCount: '666',
        debtAmount: '666',
        contactPerson: '咸虾米',
        creator: '咸虾米',
        leader: '郭子仪',
        orderId:8,
        orderDate:'2024-03-12',

    },
    {
        firmName: '天工大厦',
        projectName: '门头',
        customerName: '虾米',
        customerType: '散户',
        debtOrderCount: '666',
        debtAmount: '666',
        contactPerson: '咸虾米',
        creator: '咸虾米',
        leader: '郭子仪',
        orderId:9,
        orderDate:'2024-03-12',

    },
    {
        firmName: '天工大厦',
        projectName: '门头',
        customerName: '虾米',
        customerType: '散户',
        debtOrderCount: '666',
        debtAmount: '666',
        contactPerson: '咸虾米',
        creator: '咸虾米',
        leader: '郭子仪',
        orderId:10,
        orderDate:'2024-03-12',

    },
    {
        firmName: '天工大厦',
        projectName: '门头',
        customerName: '虾米',
        customerType: '散户',
        debtOrderCount: '666',
        debtAmount: '666',
        contactPerson: '咸虾米',
        creator: '咸虾米',
        leader: '郭子仪',
        orderId:11,
        orderDate:'2024-03-12',

    },
    {
        firmName: '天工大厦',
        projectName: '门头',
        customerName: '虾米',
        customerType: '散户',
        debtOrderCount: '666',
        debtAmount: '666',
        contactPerson: '咸虾米',
        creator: '咸虾米',
        leader: '郭子仪',
        orderId:12,
        orderDate:'2024-03-12',

    },
    {
        firmName: '天工大厦',
        projectName: '门头',
        customerName: '虾米',
        customerType: '散户',
        debtOrderCount: '666',
        debtAmount: '666',
        contactPerson: '咸虾米',
        creator: '咸虾米',
        leader: '郭子仪',
        orderId:13
    },
    
])
// 选中的时间
const optionTime = (v)=>{
    console.log(v);
}
// 选中的列
const handleSelectionChange = (v)=>{
    multipleSelection.value = v
    console.log(multipleSelection.value);
}
// 查找
const onSearch = (v)=>{
    console.log(v);
}
// 分页器大小  当前分页器
const handleChange = (v)=>{
    console.log(v);
    limit.value = v.page.limit
}
// 当前页面位置发生变化
const updatePage = (v)=>{
    console.log(v);
}
// 条目个数发生变化
const updateLimit = (v)=>{
    console.log(v);
}
</script>
<style scoped lang='scss'>

</style>

